<!doctype HTML>
<html>
	<head>
		<title>CSS link media toggle</title>
		<link rel="stylesheet" href="slow.css" media="print" onload="this.media='all'; this.onload=null;">
		<noscript><link rel="stylesheet" href="slow.css"></noscript>
		
		<style>
			/* a few demo styles */
			body {
				font-family: sans-serif;
				margin: 50px auto;
				max-width: 40em;
				padding: 0 20px;
				line-height: 1.5
			}
			pre {
				white-space: normal;
				background: #fff;
				padding: 15px;
				border: 1px solid rgba(0,0,0,.3);
				color: #333;
			}

		</style>
	</head>
	<body>
		<p>This is a test page that references a stylesheet using a standard <code>link[rel=stylesheet] with a print media type, which is swapped to all media when loaded.</code>.<p>

		<p>That markup looks like this:</p>
		<pre><code>&lt;link rel="stylesheet" href="slow.css" media="print" onload="this.media='all'"&gt;</code></pre>

		<p>Note: When run locally, the CSS file  has a 5 second delay built into its server response time. If it is loaded in a non-blocking manner as desired, you should be able to read this text before the page is styled as white text on green background.</p>

</body>
</html>
